import React, { useState, useMemo, useRef, useEffect } from 'react';
import { useModel } from '@umijs/max';
import styles from './Center.less';
import * as d3 from 'd3';

// 定义数据项的类型
interface ScoreData {
    year: string;
    province: string;
    campus: string;
    category: string;
    category2: string;
    proname: string;
    max: string;
    min: string;
    average: string;
}

interface DetailData {
    year: string;
    province: string;
    campus: string;
    category: string;
    category2: string;
    proname: string;
    detailValue: string;  // 专业的某种统计数据
    detailcat: string;    // 专业的详细分类信息
}

interface TotalData {
    year: string;
    province: string;
    category: string;
    category2: string;
    totalValue: string;  // 总体数据，例如：总人数
}

const Center: React.FC = () => {
    const { scoreData, totalData, detailData } = useModel('global');
    
    // 定义状态来存储选中的省份和专业名称
    const [selectedProvince, setSelectedProvince] = useState<string>('天津');
    const [selectedProname, setSelectedProname] = useState<string>('工科试验班(智能与计算类)');

    // 提取所有省份
    const provinces = useMemo(() => {
        const provinceSet = new Set<string>();
        scoreData.forEach(item => provinceSet.add(item.province));
        return Array.from(provinceSet);
    }, [scoreData]);

    // 根据选中的省份筛选可以选择的专业
    const pronames = useMemo(() => {
        const pronameSet = new Set<string>();
    
        // 筛选出该省份下的所有专业
        scoreData.forEach(item => {
            if (item.province === selectedProvince) {
                pronameSet.add(item.proname);
            }
        });
    
        return Array.from(pronameSet);
    }, [scoreData, selectedProvince]);

    // 过滤数据，基于选中的省份和专业名称（proname）
    const filteredData = useMemo(() => {
        return scoreData.filter(item => {
            let isProvinceMatch = selectedProvince ? item.province === selectedProvince : true;
            let isPronameMatch = selectedProname ? item.proname === selectedProname : true;
            return isProvinceMatch && isPronameMatch;
        });
    }, [scoreData, selectedProvince, selectedProname]);

    //过滤数据
    const filteredDetailData = useMemo(() => {
        // 检查 detailData 是否已加载并且不为空
        if (!detailData || detailData.length === 0) {
            return [];  // 如果没有数据，返回空数组
        }
    
        // 返回过滤后的数据
        return detailData.filter(item => {
            const isProvinceMatch = selectedProvince ? item.province === selectedProvince : true;
            const isPronameMatch = selectedProname ? item.proname === selectedProname : true;
            return isProvinceMatch && isPronameMatch;
        });
    }, [detailData, selectedProvince, selectedProname]);  

    // 过滤 total.json 数据
    const filteredTotalData = useMemo(() => {
        return totalData.filter(item => {
            return item.province === selectedProvince;  // 仅根据 province 过滤
        });
    }, [totalData, selectedProvince]);

    // 绘制 D3 图表的容器引用
    const svgRef = useRef<SVGSVGElement | null>(null);
    const svgRef2 = useRef<SVGSVGElement | null>(null);

    useEffect(() => {
        // 首先处理第一个直方图（filteredData）
        if (!svgRef.current || filteredData.length === 0) return;
    
        // 获取屏幕的宽度和高度
        const screenWidth = window.innerWidth;
        const screenHeight = window.innerHeight;
    
        // 设置图表的尺寸和边距
        const margin = { top: 20, right: 30, bottom: 40, left: 80 };
        const width = screenWidth / 4 - margin.left - margin.right;
        const height = screenHeight / 3 - margin.top - margin.bottom;
    
        // 设置 x 和 y 轴的比例尺
        const x = d3.scaleBand()
            .domain(filteredData.map((d: ScoreData) => d.year).sort())   // x 轴为年份
            .range([0, width])
            .padding(0.1);  // 设置条形之间的间距
    
        const y = d3.scaleLinear()
            .domain([d3.min(filteredData, (d: ScoreData) => +d.min - 5), 
                     d3.max(filteredData, (d: ScoreData) => +d.min)
                   ])  // y 轴为最低分
            .nice()
            .range([height, 0]);
    
        // 清空并创建第一个 SVG 容器
        d3.select(svgRef.current).selectAll('*').remove();
    
        const svg = d3.select(svgRef.current)
            .attr('width', width + margin.left + margin.right)
            .attr('height', height + margin.top + margin.bottom)
            .append('g')
            .attr('transform', `translate(${margin.left},${margin.top})`);
    
        // 添加 X 轴坐标轴，添加过渡动画
        svg.append('g')
            .attr('transform', `translate(0,${height})`)
            .transition()
            .duration(800)
            .call(d3.axisBottom(x));
    
        // 添加 Y 轴坐标轴，添加过渡动画
        svg.append('g')
            .transition()
            .duration(800)
            .call(d3.axisLeft(y));
    
        // 绘制第一个直方图并添加动画效果
        const bars = svg.selectAll('.bar')
            .data(filteredData);
    
        // 更新已存在的条形图
        bars.transition()
            .duration(800)
            .ease(d3.easeCubicInOut)
            .attr('x', (d: ScoreData) => x(d.year) || 0)
            .attr('y', (d: ScoreData) => y(+d.min))
            .attr('width', x.bandwidth())
            .attr('height', (d: ScoreData) => height - y(+d.min))
            .style('fill', 'steelblue')
            .on('end', function(this: SVGRectElement) {
                d3.select(this)
                    .append('text')
                    .attr('x', x(d3.select(this).data()[0].year) + x.bandwidth() / 2)  
                    .attr('y', y(+d3.select(this).data()[0].min) - 5)
                    .attr('text-anchor', 'middle')
                    .text(d3.select(this).data()[0].min)
                    .style('fill', 'black');
            });
    
        // 新增条形图
        bars.enter()
            .append('rect')
            .attr('class', 'bar')
            .attr('x', (d: ScoreData) => x(d.year) || 0)
            .attr('y', height)  // 从下方开始
            .attr('width', x.bandwidth())
            .attr('height', 0)  // 初始高度为 0
            .style('fill', 'steelblue')
            .transition()
            .duration(800)
            .ease(d3.easeCubicInOut)
            .attr('y', (d: ScoreData) => y(+d.min))
            .attr('height', (d: ScoreData) => height - y(+d.min))
            .on('end', function(this: SVGRectElement) {
                d3.select(this)
                    .append('text')
                    .attr('x', x(d3.select(this).data()[0].year) + x.bandwidth() / 2)
                    .attr('y', y(+d3.select(this).data()[0].min) - 5)
                    .attr('text-anchor', 'middle')
                    .text(d3.select(this).data()[0].min)
                    .style('fill', 'black');
            });
    
        // 然后处理第二个直方图（filteredTotalData 和 filteredDetailData）
        if (!svgRef2.current || filteredTotalData.length === 0 || filteredDetailData.length === 0) {
            d3.select(svgRef2.current).selectAll('.barDetail').remove();
            d3.select(svgRef2.current).selectAll('.bar').remove();
            return;
        }
    
        const x2 = d3.scaleBand()
            .domain(filteredTotalData.map((d: TotalData) => d.year).sort())   
            .range([0, width])
            .padding(0.1);
    
        const yLeft = d3.scaleLinear()
            .domain([0, d3.max(filteredDetailData, (d: DetailData) => +d.detailValue)]) 
            .nice()
            .range([height, 0]);
    
        // const yRight = d3.scaleLinear()
        //     .domain([0, d3.max(filteredTotalData, (d: TotalData) => +d.totalValue)]) 
        //     .nice()
        //     .range([height, 0]);
    
        d3.select(svgRef2.current).selectAll('*').remove();
    
        const svg2 = d3.select(svgRef2.current)
            .attr('width', width + margin.left + margin.right)
            .attr('height', height + margin.top + margin.bottom)
            .append('g')
            .attr('transform', `translate(${margin.left},${margin.top})`);
    
        svg2.append('g')
            .attr('transform', `translate(0,${height})`)
            .transition()
            .duration(800)
            .call(d3.axisBottom(x2));
    
        svg2.append('g')
            .transition()
            .duration(800)
            .call(d3.axisLeft(yLeft));
    
        // svg2.append('g')
        //     .attr('transform', `translate(${width}, 0)`)
        //     .transition()
        //     .duration(800)
        //     .call(d3.axisRight(yRight));
    
        // 绘制 detailValue 对应的条形图
        const bars2 = svg2.selectAll('.barDetail')
            .data(filteredDetailData);
    
        bars2.transition()
            .duration(800)
            .ease(d3.easeCubicInOut)
            .attr('x', (d: DetailData) => x2(d.year) || 0)
            .attr('y', (d: DetailData) => yLeft(+d.detailValue))
            .attr('width', x2.bandwidth())
            .attr('height', (d: DetailData) => height - yLeft(+d.detailValue))
            .style('fill', 'steelblue');
    
        bars2.enter()
            .append('rect')
            .attr('class', 'barDetail')
            .attr('x', (d: DetailData) => x2(d.year) || 0)
            .attr('y', height)  
            .attr('width', x2.bandwidth())
            .attr('height', 0)
            .style('fill', 'steelblue')
            .transition()
            .duration(800)
            .ease(d3.easeCubicInOut)
            .attr('y', (d: DetailData) => yLeft(+d.detailValue))
            .attr('height', (d: DetailData) => height - yLeft(+d.detailValue));
    
        // // 绘制 totalValue 对应的折线图
        // const line = d3.line()
        //     .x((d: TotalData) => x2(d.year) + x2.bandwidth() / 2) // 将 x 轴的位置调整到条形的中间
        //     .y((d: TotalData) => yRight(+d.totalValue))
        //     .curve(d3.curveLinear);
    
        // svg2.append('path')
        //     .data([filteredTotalData])
        //     .attr('class', 'line')
        //     .attr('d', line)
        //     .style('fill', 'none')
        //     .style('stroke', 'orange')
        //     .style('stroke-width', 2);
    }, [filteredData, filteredTotalData, filteredDetailData]);    

    return (
        <div className={styles.container}>
            {/* 第一行：标题 */}
            <div className={styles.frame}>
           
            <div className={styles.title}>
                天津大学近年录取趋势（各专业最低分）
            </div>
    
            {/* 第二行：选择框 */}
            <div className={styles.row}>
                <div className={styles.selectContainer}>
                    <div>
                        <label>选择省份: </label>
                        <select
                            value={selectedProvince}
                            onChange={(e) => setSelectedProvince(e.target.value)}
                        >
                            {provinces.map((province, index) => (
                                <option key={index} value={province}>
                                    {province}
                                </option>
                            ))}
                        </select>
                    </div>
    
                    <div>
                        <label>选择专业名称: </label>
                        <select
                            value={selectedProname}
                            onChange={(e) => setSelectedProname(e.target.value)}
                        >
                            {pronames.map((proname, index) => (
                                <option key={index} value={proname}>
                                    {proname}
                                </option>
                            ))}
                        </select>
                    </div>
                    </div>
                
            </div>
    
            {/* 第三行：图表 */}
            <div className={styles.row}>
                {/* 第一个图表（原有直方图） */}
                <div className={styles.svgWrapper}>
                    <span className={styles.yAxisLabel}>录取最低分</span> {/* Y轴左侧说明 */}
                    <svg ref={svgRef}></svg>
                    <span className={styles.xAxisLabel}>年份</span> {/* X轴底部说明 */}
                </div>
    
                {/* 第二个图表 */}
                <div className={styles.svgWrapper}>
                    <span className={styles.yAxisLabel}>录取人数</span> {/* Y轴左侧说明 */}
                    <svg ref={svgRef2}></svg>
                    <span className={styles.xAxisLabel}>年份</span> {/* X轴底部说明 */}
                </div>
            </div>
        </div>
        </div>
    );    
};

export default Center;
